<template>
  <div>
    <breadcrumb></breadcrumb>
    <div class="header">
      <div class="inputItem">
        <div class="title">供应商名称</div>
        <div class="inputBox">
          <el-input v-model="supplierName" @keyup.enter.native="initList1">
          </el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">创建时间</div>
        <el-date-picker size="small" v-model="createTime" type="datetimerange" :picker-options="pickerOptions"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </div>

      <!-- 查询 -->
      <div class="Btn_grounp">
        <el-button class="searchBtn" type="primary" size="small" icon="el-icon-search" @click="initList1">查询</el-button>
        <el-button class="clearBtn" type="plain" size="small" icon="el-icon-refresh-right" @click="CleanUp">清空</el-button>
      </div>
    </div>

    <div class="main">
      <div class="main_head">
        <div class="main_head_left">
          已选择<span style="color: #1890ff">{{ selectionLegth }}</span>项
        </div>
        <div class="main_head_right">
          <button class="addCargoOwner" v-if="permissions.insert.perms != null"
            @click="$router.push('supplierList/addSupplier')">
            <i class="el-icon-plus iconBtn"></i>
            <span>新增</span>
          </button>
          <el-select class="selector" v-model="operateValue" placeholder="批量操作" size="small" @change="BatchOperation">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="list">
        <el-table :data="records" style="width: 100%" @selection-change="handleSelectionChange" header-align="left" ref="table">
          <el-table-column align="left" type="selection" width="45"></el-table-column>
          <el-table-column align="left" prop="SerialNumber" label="序号" width="60">
          </el-table-column>
          <el-table-column align="left" prop="supplierName" label="企业全称">
          </el-table-column>
          <el-table-column align="left" prop="supplierAbbreviation" label="企业简称">
          </el-table-column>
          <!-- <el-table-column align="left" prop="location" label="所属地区">
          </el-table-column> -->
          <el-table-column align="left" prop="headName" label="负责人" width="80">
          </el-table-column>
          <el-table-column align="left" prop="headTel" label="负责人电话" width="100">
          </el-table-column>
          <el-table-column align="left" prop="userName" label="运营商账号" width="100">
          </el-table-column>
          <el-table-column align="left" prop="certStatus" label="供应商状态" width="100">
            <template slot-scope="scope">
              <div class="tag" v-show="scope.row.certStatus.value == 2">
                <div class="dian"></div>
                <div class="text">认证通过</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="location" label="启用车辆安全监管平台" width="150">
            <template slot-scope="scope">
              <div class="switchBox">
                <el-switch v-model="scope.row.isShowCarManager" :active-value="0" :inactive-value="1" active-text=""
                  active-color="#1890FF" inactive-text="" inactive-color="#CCCFD2" @change="switchChange(scope.row)">
                </el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="comCreateTime" label="成立时间" width="139" sortable>
          </el-table-column>
          <el-table-column align="left" prop="createTime" label="创建时间" width="139" sortable>
          </el-table-column>
          <el-table-column align="left" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text" size="small" v-if="permissions.getDetails.perms != null" @click="
                  $router.push(
                    '/supplierManagement/supplierList/details/' +
                    scope.row.supplierId
                  )
                  ">详情</el-button>
                <el-button type="text" size="small" v-if="permissions.update.perms != null" @click="
                  $router.push({
                    path: '/supplierManagement/supplierList/editSupplier',
                    query: { supplierId: scope.row.supplierId },
                  })
                  ">编辑</el-button>
                <el-button type="text" size="small" v-if="permissions.batchDelete.perms != null"
                  @click="DeleteItem(scope.row.supplierId)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paginationBox">
        <el-pagination class="pagination" background layout="slot,prev, pager, next" :total="data.total * 1"
          :page-size="data.size * 1" :pager-count="5" @current-change="changePages($event)">
          <template slot>
            <span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">共{{ data.total }}条,每页{{ data.size }}条</span>
          </template>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import httpApi from "@/http";
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      supplierName: "",
      createTime: [],//创建时间
      operateValue: "", //操作选择
      options: [{ value: "批量删除", label: "批量删除" }],
      records: [],
      data: {},
      pageCurrent: "1",
      size: "10",
      multipleSelection: "", //多选
      selectionLegth: 0,
      permissions: {}
    };
  },


  created() {
    this.permissions = JSON.parse(sessionStorage.getItem('permissions'))
  },
  methods: {
    switchChange(val) {
      //状态按钮变化
      let params = {
        supplierId: val.supplierId,
      };
      console.log("参数", params);
      httpApi.supplierManagementApi.vehicleSafetyManagement(params).then((res) => {
        // console.log("查询结果", res);
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "修改状态成功!",
          });

        } else {
          this.$message.error("修改状态失败!");
          //还原开关按钮状态
          // isShowCarManager 0代表开启 1代表关闭
          if (val.isShowCarManager == 1) {
            val.isShowCarManager = false;
          } else if (val.isShowCarManager == 0) {
            val.isShowCarManager = true;
          }
        }
      });
    },
    getSerialNumber() {
      // 前端解决序号
      this.records.forEach((item, i) => {
        let num = i + 1 + Number(this.size) * (this.pageCurrent - 1);
        item.SerialNumber = num;
      });
    },
    // 列表数据选择变化时
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log('批量选择', this.multipleSelection);
      let supplierIdArr = [];
      //数组转字符串
      this.multipleSelection.forEach((item) => {
        supplierIdArr.push(item.supplierId);
      });
      this.multipleSelection = supplierIdArr.join(",");
      this.selectionLegth = supplierIdArr.length;
      // console.log('批量删除选择数据', this.multipleSelection);
    },
    BatchOperation(val) {
      // console.log(val);
      if (val == "批量删除") {
        this.$confirm("此操作将批量删除该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // 发起批量删除请求
            if (this.multipleSelection != "") {
              let params = {
                supplierIds: this.multipleSelection,
              };
              // console.log('批量删除传参',params);
              httpApi.supplierManagementApi
                .deleteSupplierById(params)
                .then((res) => {
                  // console.log('批量删除', res);
                  if (res.data.code == 200) {
                    this.initList(); //删除后 更新列表数据
                    this.$message({
                      type: "success",
                      message: "批量删除成功!",
                    });
                  }
                });
            } else if (this.multipleSelection == "") {
              this.$message.warning("请选择删除项");
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
        this.operateValue = "批量操作"; //重置
      }
    },
    DeleteItem(supplierId) {
      // console.log(supplierId);
      this.$confirm("此操作将删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 发起单个删除请求

          httpApi.supplierManagementApi
            .deleteSupplierById({ supplierIds: supplierId })
            .then((res) => {
              // console.log('删除结果', res);
              if (res.data.code == 200) {
                this.initList();
                //删除后 更新列表数据
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败!",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
	initList1(){
		this.pageCurrent=1;
		this.initList();
	},
    initList() {
      let params = {
        size: this.size,
        Current: this.pageCurrent,
        supplierName: this.supplierName,
        startTime: this.createTime != null ? this.createTime[0] : '', //开始时间
        endTime: this.createTime != null ? this.createTime[1] : '', //结束时间
      };
      httpApi.supplierManagementApi
        .getSupplierManagementList(params)
        .then((res) => {
          // console.log('认证供应商res', res);
          this.records = res.data.data.records;
          this.getSerialNumber();
          // console.log('认证供应商records', this.records);
          this.data = res.data.data;
          // console.log('认证供应商d  ata', this.data);
        });
    },
    changePages(val) {
      this.pageCurrent = val;
      this.initList();
    },
    CleanUp() {
		this.pageCurrent=1;
      this.supplierName = "";
      this.createTime = []
      this.initList();
    },
     // 记录滚动距离
     scrollEvent(res) {
      this.$route.meta.scrollTop = res.target.scrollTop
    },
  },
  activated() {
    //组件激活时监听表格滚动条位置,
    this.$refs.table.bodyWrapper.addEventListener('scroll',this.scrollEvent,false)
    // 激活设置滚动位置
    this.$refs.table.bodyWrapper.scrollTop=this.$route.meta.scrollTop 
  },
  beforeRouteLeave(to, from, next) {
    // 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
    this.$refs.table.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
    next()
  },

 
  mounted() {
    this.initList();
  },
  components: {
    breadcrumb,
  },
};
</script>

<style lang="scss" scoped>
.header {
  height: 76px;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 29px;
  margin-bottom: 8px;

  .Btn_grounp {
    display: flex;
    margin-left: 16px;

    .searchBtn {
      width: 80px;
      height: 32px;
      color: #fff;
      font-size: 12px;
    }

    .clearBtn {
      width: 80px;
      height: 32px;
      color: #262626;
      font-size: 12px;
    }
  }

  .inputItem {
    display: flex;
    align-items: center;
    margin-right: 23px;

    >.title {
      color: #262626;
      font-size: 12px;
      margin-right: 7px;
    }

    >.inputBox {
      width: 160px;

      .select {
        ::v-deep .el-input__icon {
          line-height: 0;
        }
      }

      ::v-deep .el-input__inner {
        height: 32px;
        font-size: 12px;
      }

      ::v-deep .el-input__inner::placeholder {
        color: #c3c3c3;
        font-size: 12px;
      }
    }
  }
}

.main {
  width: 100%;
  background-color: #fff;
  padding: 0px 30px 0px 30px;

  .main_head {
    display: flex;
    justify-content: space-between;
    height: 64px;
    align-items: center;

    .main_head_left {
      font-size: 12px;
      color: #262626;
    }

    .main_head_right {
      .addCargoOwner {
        background-color: #1890ff;
        border-radius: 4px;
        height: 32px;
        color: #ffffff;
        font-size: 12px;
        padding: 8px 17px 9px 17px;
        transition: 0.2s;
        cursor: pointer;
        margin-right: 17px;

        .iconBtn {
          margin-right: 7px;
          font-size: 15px;
        }

        &:hover {
          opacity: 0.8;
        }
      }

      .selector {
        width: 105px;
        height: 32px;
        color: #262626;
        font-size: 12px;
      }
    }
  }

  .list {
    height: calc(100vh - 323px);
    width: 100%;

    .switchBox {
      display: flex;
      align-items: center;

      .rightText {
        font-size: 12px;
        color: #595959;
      }
    }

    .tag {
      width: 70px;
      height: 28px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      background-color: #ecf5fe;
      color: #1890ff;

      &.NoPass {
        color: #f7555d;
        background-color: #fde8e9;
      }

      .dian {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        margin-right: 4px;
        background-color: #1890ff;

        &.NoPass {
          background-color: #f7555d;
        }
      }
    }

    ::v-deep .el-table__body-wrapper {
      height: calc(100vh - 372px);
      overflow-y: scroll;
    }

    // 表头样式
    ::v-deep .el-table__header th {
      background-color: #f0f6fd;
      color: #262626;
      font-size: 12px;
      height: 48px !important;
      font-weight: bold;
      text-align: left;
      padding: 0;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #595959;
        font-size: 12px;
        height: 48px;
      }
    }

    .stateBtns {
      height: 30px;
      width: 76px;

      ::v-deep .el-button {
        height: 30px;
        width: 76px;
        font-size: 12px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 30px;
      }

      .waitPass {
        background-color: #ecf5fe;
        color: #1890ff;
      }

      .noPass {
        background-color: #fde8e9;
        color: #f7555d;
      }
    }
  }

  .paginationBox {
    width: 100%;
    background-color: #fff;
    display: flex;
    height: 48px;

    .pagination {
      height: 48px;
      display: flex;
      align-items: center;
      margin-left: auto;
    }
  }
}
</style>
